<template>
    <div class="container">
        <div class="filter-container vip-zone">
            <div class="filter-content-container fold" ref="fold">
                <el-row class="filter-row">
                    <el-col :span="2" class="filter-label"> 兴趣技能</el-col>
                    <el-col :span="22" class="filter-content">
                        <!---->
                        <div class="select-item">古典舞</div>
                        <div class="select-item">中国舞</div>
                        <div class="select-item">原创编舞</div>
                        <div class="select-item">爵士舞</div>
                        <div class="select-item">流行热舞</div>
                        <div class="select-item">成人舞蹈</div>
                        <div class="select-item">少儿舞蹈</div>
                        <div class="select-item">街舞</div>
                        <div class="select-item">民族舞</div>
                        <div class="select-item">热门舞蹈</div>
                        <div class="select-item">民族民间舞</div>
                        <div class="select-item">中国风</div>
                        <div class="select-item">基本功</div>
                        <div class="select-item">肚皮舞</div>
                        <div class="select-item">儿童舞蹈</div>
                        <div class="select-item">东方舞</div>
                    </el-col>
                </el-row>
                <el-row class="filter-row">
                    <el-col :span="2" class="filter-label"> 价格区间</el-col>
                    <el-col :span="22" class="filter-content">
                        <!---->
                        <div class="select-item">2元以下</div>
                        <div class="select-item">2-100元</div>
                        <div class="select-item">101-400元</div>
                        <div class="select-item">400元以上</div>
                    </el-col>
                </el-row>
                <el-row class="filter-row">
                    <el-col :span="2" class="filter-label"> 课程类型</el-col>
                    <el-col :span="22" class="filter-content">
                        <div class="select-item">舞蹈教学</div>
                        <div class="select-item">成品舞</div>
                        <div class="select-item">成人零基础</div>
                        <div class="select-item">教学视频</div>
                        <div class="select-item">古典舞</div>
                        <div class="select-item">基本功</div>
                        <div class="select-item">舞蹈</div>
                        <div class="select-item">中国舞</div>
                        <div class="select-item">原创编舞</div>
                        <div class="select-item">镜面分解</div>
                        <div class="select-item">舞蹈组合</div>
                        <div class="select-item">编创</div>
                        <div class="select-item">年会舞蹈</div>
                        <div class="select-item">少儿舞蹈</div>
                        <div class="select-item">爵士舞</div>
                        <div class="select-item">肚皮舞</div>
                    </el-col>
                </el-row>
                <el-row class="filter-row">
                    <el-col :span="2" class="filter-label"> 学习目标</el-col>
                    <el-col :span="22" class="filter-content">
                        <div class="select-item">舞蹈教学</div>
                        <div class="select-item">易于自学</div>
                        <div class="select-item">气质提升</div>
                        <div class="select-item">娱乐才艺</div>
                        <div class="select-item">个人提升</div>
                        <div class="select-item">节奏协调</div>
                        <div class="select-item">专业表演</div>
                        <div class="select-item">舞蹈编创</div>
                        <div class="select-item">参加比赛</div>
                        <div class="select-item">古典舞</div>
                        <div class="select-item">舞蹈表演</div>
                        <div class="select-item">身体柔韧</div>
                        <div class="select-item">减肥塑形</div>
                        <div class="select-item">动作分析</div>
                        <div class="select-item">便宜方便</div>
                        <div class="select-item">年会舞蹈</div>
                    </el-col>
                </el-row>
                <el-row class="filter-row">
                    <el-col :span="2" class="filter-label"> 难易度</el-col>
                    <el-col :span="22" class="filter-content">
                        <div class="select-item">零基础</div>
                        <div class="select-item">业余初级</div>
                        <div class="select-item">业余中级</div>
                        <div class="select-item">业余高级</div>
                        <div class="select-item">专业初级</div>
                        <div class="select-item">专业中级</div>
                        <div class="select-item">专业高级</div>
                    </el-col>
                </el-row>
            </div>
            <p class="fold-toggle-container">
                <span @click="changeList" ref="changelist">展开全部</span>
            </p>
        </div>
        <div class="order-container">
            <div class="order-item active">综合排序</div>
            <div class="order-item">销量</div>
            <div class="order-item">评价</div>
            <div class="order-item">浏览量</div>
            <div class="order-item menu-hover-container">
                价格
                <svg
                    viewBox="0 0 1024 1024"
                    style="vertical-align: middle; width: 15px; height: 15px; margin-left: 5px"
                >
                    <path
                        fill="currentColor"
                        d="M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
                    ></path>
                </svg>
                <div class="menu-content">
                    <div class="menu-item">价格由高到低</div>
                    <div class="menu-item">价格由低到高</div>
                </div>
            </div>
            <div class="order-item">发布时间</div>
        </div>
        <VideoCoursesList></VideoCoursesList>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "VideoCourse",
});
</script>

<script setup lang="ts">
import { ref } from "vue";
import VideoCoursesList from "@/views/Discovery/Video_courses/components/VideoCoursesList.vue";

// 课程列表
const changelist = ref();
const fold = ref();
// 改变状态
const changeList = () => {
    // 当是展开状态时
    if (changelist.value.innerText === "展开全部") {
        changelist.value.innerText = "收起";
        // 删除class
        fold.value.classList.remove("fold");
    } else {
        changelist.value.innerText = "展开全部";
        // 添加class
        fold.value.classList.add("fold");
    }
};
</script>
<style scoped lang="less">
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.fold {
    height: 133px;
}

.active {
    color: #f93684;
}

.vip-container {
    color: #111;
    background-color: #fff;
    margin-top: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    padding: 20px 30px 16px;

    .vip-title {
        font-size: 16px;
        margin: 0 0 16px;
        font-weight: 400;
    }

    .content {
        display: flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        position: relative;

        .avatar {
            margin-right: 10px;
            width: 50px;
            height: 50px;

            .avatar {
                width: 100% !important;
                height: 100% !important;
                border-radius: 50%;
            }

            .notshowname {
                background-size: cover;
                background: url("https://rs.dance365.com/default_head@3x.png?imageView2/0/w/100/h/100/format/webp/ignore-error/1")
                    50% center;
                margin-right: 0;
            }
        }

        .vip-mid {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;

            .vip-user {
                position: relative;
                min-width: 220px;

                &::before {
                    content: "";
                    height: 40px;
                    border-left: 1px solid #dee2e6;
                    position: absolute;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                }

                .name {
                    padding-top: 4px;
                    font-size: 16px;

                    .level_box {
                        -webkit-box-sizing: border-box;
                        box-sizing: border-box;
                        background: -webkit-gradient(linear, left top, left bottom, from(#ff289b), to(#ff43d0));
                        background: linear-gradient(#ff289b, #ff43d0);
                        border: 1px solid #fff;
                        border-radius: 4px;
                        padding: 0 8px;
                        display: inline-block !important;
                        line-height: 1.15;
                        white-space: nowrap;
                        cursor: pointer;

                        i {
                            width: 8px;
                            height: 10px;
                            display: inline-block;
                            background-size: 100%;
                            background-repeat: no-repeat;
                        }

                        .lv {
                            width: 15px;
                            height: 10px;
                            background-image: url(https://rs.dance365.com/level_Lv.@3x.png);
                        }

                        .lv2 {
                            background-image: url(https://rs.dance365.com/level_num_2@3x.png);
                        }
                    }
                }

                .vip-tip {
                    margin-top: 8px;
                    font-size: 12px;
                    color: #f93684;
                }
            }

            .right-item {
                flex: 1;
                text-align: center;
                cursor: pointer;

                span {
                    width: 58px;
                    height: 58px;
                    display: inline-block;
                    background-size: 100%;
                    vertical-align: middle;
                    margin-right: 30px;
                }

                p {
                    display: inline-block;
                    vertical-align: middle;

                    i {
                        font-style: normal;
                        color: #f93684;
                    }
                }
            }
        }

        .vip-free-button {
            border-radius: 20px;
            display: block;
            margin-bottom: 8px;
        }

        .more-right {
            color: #7d8090;
            font-size: 12px;
        }
    }
}

.filter-container {
    padding: 26px 30px;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 10px;
    position: relative;

    .filter-content-container {
        overflow: hidden;

        .filter-row {
            font-size: 14px;
            margin: 0 0 16px;

            .filter-label {
                color: #b1b5c1;
                padding: 7px 0;
            }

            .filter-content {
                .select-item {
                    display: inline-block;
                    cursor: pointer;
                    font-size: 14px;
                    border-radius: 4px;
                    color: #7d8090;
                    padding: 7px 13px;
                    user-select: none;
                    margin-right: 24px;
                    margin-bottom: 10px;
                }
            }
        }
    }

    .fold-toggle-container {
        text-align: center;
        color: #f93684;
        font-size: 14px;
        margin: 20px 0 0;
        cursor: pointer;
    }
}

.order-container {
    padding: 25px 30px;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 10px;

    .order-item {
        display: inline-block;
        font-size: 14px;
        color: #7d8090;
        cursor: pointer;

        &.menu-hover-container {
            position: relative;

            .menu-content {
                display: none;
                position: absolute;
                z-index: 10020;
                top: 0;
                left: 50%;
                transform: translate(-50%, -17px);
                box-shadow: 2px 0 9px rgb(0 0 0 / 10%);
                border-radius: 4px;
                background-color: #fff;

                .menu-item {
                    padding: 17px 0;
                    width: 120px;
                    text-align: center;
                    font-size: 14px;
                    color: #111;
                    cursor: pointer;

                    &:hover {
                        color: deeppink;
                    }
                }
            }

            &:hover {
                .menu-content {
                    display: block;
                }
            }
        }
    }

    // 除了第一个,后几个左边距为60px
    .order-item:not(:first-child) {
        margin-left: 60px;
    }
}
</style>
